﻿
<!DOCTYPE html>

<!--suppress ALL -->
<html lang="en" xmlns:th="http://www.thymeleaf.org"  xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head th:replace="header::header-fragment">
    <link rel="shortcut icon" th:href="@{/static/static/images/icon.png}" type="image/x-icon">
</head>
<title>帖子详情</title>

<!-- 比较好用的代码着色插件 -->
<!--<link th:href="@{/static/static/css/prettify.css}" rel="stylesheet" />-->
<!-- 本页样式表 -->
<script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.js"></script>
<!--<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.0/build/styles/default.min.css">-->
<!--<link href="http://cdn.bootcss.com/highlight.js/8.0/styles/monokai_sublime.min.css" rel="stylesheet">-->
<link href="https://lib.baomitu.com/lightgallery/1.6.12/css/lightgallery.min.css" rel="stylesheet">
<!--<script src="http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script>-->
<!--<script src="https://cdn.bootcss.com/highlight.js/9.15.10/highlight.min.js"></script>-->
<link href="https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css" rel="stylesheet">
<link th:href="@{/static/css/editormd/editormd.min.css}" rel="stylesheet" />
<link th:href="@{/static/css/editormd/editormd.preview.min.css}" rel="stylesheet" />
<link th:href="@{/static/static/css/detail.css}" rel="stylesheet" />
<link th:href="@{/static/js/highlight/pojoaque.css}" rel="stylesheet" />
<script src="http://apps.bdimg.com/libs/highlight.js/9.1.0/highlight.min.js"></script>

<script>hljs.initHighlightingOnLoad();</script>
<script th:src="@{/static/js/lightgallery/lightgallery.js}"></script>

<body>
    <!-- 导航 -->
    <nav th:replace="header::header-nav('article')">
    </nav>
    <!-- 主体（一般只改变这里的内容） -->
    <div class="blog-body">
        <div class="blog-container">
            <blockquote class="layui-elem-quote sitemap layui-breadcrumb shadow">
                <a th:href="@{/article/index/1}" title="网站首页">网站首页&nbsp;</a>
                <a th:href="@{/category/1}" title="文章专栏">&nbsp;文章专栏&nbsp;</a>
                <a><cite>&nbsp;<th:block th:text="${info.title}"></th:block></cite></a>
            </blockquote>
            <div class="blog-main">
                <div class="blog-main-left">
                    <!-- 文章内容（使用Kingeditor富文本编辑器发表的） -->
                    <div class="article-detail shadow animated fadeInUp">
                        <div class="article-detail-title">
                            <th:block th:text="${info.title}"></th:block>
                        </div>
                        <div class="article-detail-info">
                            <span th:class="article_is_yc" th:text="${info.tag}"></span>
                            <i class="layui-icon layui-icon-log"></i><span th:text="${info.creatTimeStr}"></span>
                            <i class="layui-icon layui-icon-username"></i><span><th:block th:text="${author}"></th:block></span>
                            <i class="fa fa-eye fa-lg"></i><span><th:block text="100"></th:block>100浏览</span>
                            <i class="layui-icon layui-icon-tabs"></i><span><a th:href="@{'/category/1?category='+${info.tag}}"><th:block th:text="${info.tag}"></th:block></a></span>
                        </div>
                        <hr/>
                        <div class="markdown-body editormd-html-preview" style="width: 96%;" id="wordsView">
                        <!--<div class="article-detail-content" id="wordsView">-->
                            <th:block th:utext="${info.content}"></th:block>

                        </div>
                        <div class="article-detail-copyright">
                            <p>版权声明：本文由<a href="http://apenixx.top" target="_blank" style="color:#1E9FFF;margin:0 5px;" th:text="${author}">ApeNixX</a>原创出品，转载请注明出处！</p>
                            <!--<p>本文链接：<a th:href="@{'/article/details/'+${info.articleId}}">http://www.apenixx.top/article/details/<span th:text="${info.articleId}">52</span></a></p>-->
<!--                            <p>本文链接：<a th:href="@{${info.articleUrl}}" th:text="${info.articleUrl}">http://www.apenixx.top/article/details/</a></p>-->

                        </div>


                        <br>
                        <div class="component-box">
                            <a href="javascript:;" class="praise" blog-event="praise"><i class="fa fa-thumbs-up fa-fw"></i>点赞（<span id="praiseCnt" >1</span>）</a>
                            <a href="javascript:;" class="reword" blog-event="reword">赏</a>
                            <a href="javascript:;" class="share" blog-event="share"><i class="fa fa-share-alt fa-fw"></i>分享（<span id="shareCnt">2</span>）</a>
                        </div>
                        <div style="text-align:center;margin:10px;width:100%">
                            <span>赞助本站，网站的发展离不开你们的支持！</span>
                        </div>
                    </div>
                    <!-- 评论区域 -->
                    <div class="blog-module shadow animated fadeInUp" style="box-shadow: 0 1px 8px #a6a6a6;">
                        <fieldset class="layui-elem-field layui-field-title" style="margin-bottom:0">
                            <legend>来说两句吧</legend>
                            <div class="layui-field-box">
                                <form class="layui-form blog-editor" action="" >
                                    <div class="layui-form-item">
                                        <textarea name="editorContent" lay-verify="content" id="remarkEditor" placeholder="请输入内容" class="layui-textarea layui-hide"></textarea>
                                    </div>
                                    <input type="hidden" id="articleId1" th:value="${info.id}" name="articleId"></input>
                                    <div class="layui-form-item">
                                        <button class="layui-btn"  lay-submit="formRemark" lay-filter="formRemark">提交评论</button>
                                    </div>
                                </form>
                            </div>
                        </fieldset>
                        <div class="blog-module-title">最新评论( <span th:text="${commentNum}?:0">评论数</span> )</div>
                        <ul class="blog-comment">
                            <li class="animated zoomIn" th:if="${comments}!=''" >
                                <div class="comment-parent" >
                                    <!--评论的内容-->
                                    <div  class="comment-allow">
                                        <div id="comments-content" th:if="${article}!=''">
                                            <ul th:if="${comments}!=''" class="comments-reply">
                                                <th:block th:each="comment :${comments}">
                                                    <p th:id="'li-comment-'+${comment.id}">
                                                        <figure th:id="'comment-'+${comment.id}">
                                                            <img th:src="@{/static/static/images/Logo_40.png}" alt=""
                                                                  class="img-responsive" style="width: 50px;height: 50px;"/>
                                                            <h4><a style="font-size: medium" href="#" target="blank" th:text="${comment.answererName}"></a></h4>
                                                            <h3  class="content" style="float: left;margin-top:-90px;margin-left:80px;font-size: large"><th:block th:utext="${comment.content}"></th:block></h3>
                                                        </figure>
                                                    <p><div class="info info-footer" style="margin-top: -15px;"> <th:block th:text="${comment.createTimeStr}"></th:block></div>
                                                    </span><a style="float: left;margin-top: -18px;margin-left: 230px;" class="btn-reply" href="javascript:;" onclick="btnReplyClick(this)">回复</a></p>
                                                    <hr/>
                                                </th:block>
                                            </ul>
                                        </div>
                                    </div>

                                    <!-- 回复表单默认隐藏 -->
                                    <div class="replycontainer layui-hide">
                                        <form class="layui-form" action="">
                                            <div class="layui-form-item">
                                                <textarea name="replyContent" lay-verify="replyContent" placeholder="请输入回复内容" class="layui-textarea" style="min-height:80px;"></textarea>
                                            </div>
                                            <div class="layui-form-item">
                                                <button class="layui-btn layui-btn-mini" lay-submit="formReply" lay-filter="formReply">提交</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </li>

                        </ul>
                    </div>
                </div>
                <div class="blog-main-right">
                    <!--右边悬浮 平板或手机设备显示-->
                    <div class="category-toggle"><i class="fa fa-chevron-left"></i></div><!--这个div位置不能改，否则需要添加一个div来代替它或者修改样式表-->
                    <div class="blog-card shadow   animated fadeInRight">
                        <div class="blog-card-title">
                            <span class="icon"><i class="layui-icon" aria-hidden="true">&#xe66e;</i></span>
                            <span class="text">标签云</span>
                        </div>
                        <!--<div class="hotusers-header"><i class="fa fa-tags" aria-hidden="true"></i>&nbsp;标签云</div>-->
                        <div class="tag-cloud">
                            <div class="widget-tag-cloud" id="wrap">
                                <a th:each="tag:${tags}" th:text="${tag.tagName}"
                                   th:href="@{'/article/index/1?tag='+${tag.tagName}}"></a>
                            </div>
                        </div>

                    </div>
                    <br>
                    <div class="blog-card shadow animated fadeInRight">
                        <div class="blog-card-title">
                            <span class="icon"><i class="layui-icon" aria-hidden="true">&#xe669;</i></span>
                            <span class="text">最新文章</span>
                        </div>
                        <!--<div class="hotusers-header"><i class="fa fa-list-alt"></i>&nbsp;相似文章</div>-->
                        <ul class="blog-card-ul">
                            <li><span class="layui-badge" >100</span><a href="#" >Web安全之跨站请求伪造CSRF</a><span style="font-size: 12px;float: right;" text="2020-06-06"></span></li>
                            <li><span class="layui-badge" >100</span><a href="#" >Web安全之跨站请求伪造CSRF</a><span style="font-size: 12px;float: right;" text="2020-06-06"></span></li>
                            <li><span class="layui-badge" >100</span><a href="#" >Web安全之跨站请求伪造CSRF</a><span style="font-size: 12px;float: right;" text="2020-06-06"></span></li>
                            <li><span class="layui-badge layui-bg-blue " >100</span><a href="#" >Web安全之跨站请求伪造CSRF</a><span style="font-size: 12px;float: right;" text="2020-06-06"></span></li>
                            <li><span class="layui-badge layui-bg-blue" >100</span><a href="#" >Web安全之跨站请求伪造CSRF</a><span style="font-size: 12px;float: right;" text="2020-06-06"></span></li>

                        </ul>
                    </div>

                    <br>
                    <div class="blog-card shadow animated fadeInRight">
                        <div class="blog-card-title">
                            <span class="icon"><i class="fa fa-random"></i></span>
                            <span class="text">随便看看</span>
                        </div>
                        <ul class="blog-card-ul hotArticle">
                            <li><a class="aa" target="_blank" href="#"><span class="imgg"></span><span class="spann" >排序的升级版—快速排序以及归并排序</span><span >2020-06-07 15:36</span><span style="float: right"><i class="fa fa-eye"></i>&nbsp;<th:block text="50"></th:block>&nbsp;50 阅</span></a></li>
                            <li><a class="aa" target="_blank" href="#"><span class="imgg"></span><span class="spann" >排序的升级版—快速排序以及归并排序</span><span >2020-06-07 15:36</span><span style="float: right"><i class="fa fa-eye"></i>&nbsp;<th:block text="50"></th:block>&nbsp;50 阅</span></a></li>
                            <li><a class="aa" target="_blank" href="#"><span class="imgg"></span><span class="spann" >排序的升级版—快速排序以及归并排序</span><span >2020-06-07 15:36</span><span style="float: right"><i class="fa fa-eye"></i>&nbsp;<th:block text="50"></th:block>50&nbsp;阅</span></a></li>
                            <li><a class="aa" target="_blank" href="#"><span class="imgg"></span><span class="spann" >排序的升级版—快速排序以及归并排序</span><span >2020-06-07 15:36</span><span style="float: right"><i class="fa fa-eye"></i>&nbsp;<th:block text="50"></th:block>50 &nbsp;阅</span></a></li>

                        </ul>
                    </div>
                </div>
                <div class="clear"></div>
            </div>
        </div>
    </div>
    <!-- 底部 -->
    <footer class="blog-footer">
        <p><span>Copyright</span><span>&copy;</span><span>2020</span><a href="http://www.lyblogs.cn">BBS-FORUM</a><span>Design By CWX</span></p>
        <p><a href="http://www.beian.miit.gov.cn/" target="_blank">粤ICP备20013507号</a></p>
    </footer>
    <!--侧边导航-->

    <ul class="layui-nav layui-nav-tree layui-nav-side blog-nav-left layui-hide" lay-filter="nav">
        <li sec:authorize="hasAnyRole('ROLE_USER')" class="layui-nav-item" style="margin-bottom: 30px;">
            <a href="javascript:;" class="blog-user">
                <!--<img th:src="@{/static/static/images/Absolutely.jpg}" alt="Absolutely" title="Absolutely" />-->
                <img style=" width: 40px;height: 40px;border-radius: 50px;" th:src="@{${session.SPRING_SECURITY_CONTEXT.authentication.principal.avatarImgUrl}}" />
                <!--<sec:authentication property="principal.id"/>-->
                <span sec:authentication="name"></span>&nbsp;
            </a>
            <dl class="layui-nav-child">
                <dd><a th:href="@{/user/home}">基本资料</a></dd>
                <dd><a class="news" th:href="@{/user/home}">我的消息</a></dd>
                <dd><a th:href="@{/user/home}">安全设置</a></dd>
                <dd th:if="${session.role=='ROLE_VIP'}"><a th:href="@{/admin/index}">后台管理</a></dd>
                <dd><a th:href="@{/logout}">退出登录</a></dd>
            </dl>
        </li>

        <li class="layui-nav-item">
            <a th:href="@{/article/index/1}"><i class="fa fa-home fa-fw"></i>&nbsp;网站首页</a>
        </li>
        <li class="layui-nav-item  layui-this">
            <a th:href="@{/category/1}"><i class="fa fa-file-text fa-fw"></i>&nbsp;文章专栏</a>
        </li>
        <li class="layui-nav-item">
            <a th:href="@{/user/archives}"><i class="fa fa-calendar-check-o fa-fw"></i>&nbsp;归档</a>
        </li>
        <li class="layui-nav-item">
            <a th:href="@{/user/resource}"><i class="fa fa-tags fa-fw"></i>&nbsp;资源分享</a>
        </li>
        <li class="layui-nav-item">
            <a th:href="@{/user/timeline}"><i class="fa fa-hourglass-half fa-fw"></i>&nbsp;点点滴滴</a>
        </li>
        <li class="layui-nav-item">
            <a th:href="@{/user/about}"><i class="fa fa-info fa-fw"></i>&nbsp;关于本站</a>
        </li>
        <li sec:authorize="anonymous" class="layui-nav-item" style="float: right;">
            <a th:href="@{/user/login}">&nbsp;&nbsp;登录</a>
        </li>
        <li sec:authorize="anonymous" class="layui-nav-item" style="float: right;">
            <a th:href="@{/user/register}">&nbsp;&nbsp;注册</a>
        </li>
    </ul>
    <!--分享窗体-->
    <div class="bdsharebuttonbox bdshare-button-style0-32" data-tag="share_1" style="width: 200px; display: none;" data-bd-bind="1581353425525">
        <a class="bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a>
        <a class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
        <a class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
        <a class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
    </div>

    <!--遮罩-->
    <div class="blog-mask animated layui-hide"></div>
    <link href="https://cdn.bootcss.com/aplayer/1.10.1/APlayer.min.css" rel="stylesheet">

    <script src="https://cdn.bootcss.com/aplayer/1.10.1/APlayer.min.js"></script>
    <!-- require MetingJS -->
    <script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>
    <meting-js
            id="168853794"
            lrc-type="0"
            server="netease"
            order="random"
            type="playlist"
            fixed="true"
            list-olded="true"
            list-folded="true"
            list-max-height="400px"
            preload="none"

    >
    </meting-js>

    <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
    <!-- layui.js -->
    <script th:src="@{/static/static/plug/layui/layui.js}"></script>

    <!-- 自定义全局脚本 -->
    <!--<script th:src="@{/static/static/js/global.js}"></script>-->
    <!-- 比较好用的代码着色插件 -->
    <!--<script th:src="@{/static/static/js/prettify.js}"></script>-->
    <!-- 本页脚本 -->
    <script th:src="@{/static/static/js/detail.js}"></script>
    <script th:src="@{/static/static/js/details2.js}"></script>

    <!--放大图片插件-->
    <script th:src="@{/static/js/lightgallery/picturefill.min.js}"></script>
    <script th:src="@{/static/js/lightgallery/lg-pager.js}"></script>
    <script th:src="@{/static/js/lightgallery/lg-autoplay.js}"></script>
    <script th:src="@{/static/js/lightgallery/lg-fullscreen.js}"></script>
    <script th:src="@{/static/js/lightgallery/lg-zoom.js}"></script>
        <!--百度分享-->
    <script th:inline="javascript"  th:src="@{/static/static/js/share.js}">
        var id = [[${info.id}]];
        var title = [[${info.title}]];
    </script>
    <!--动态改变便签颜色大小-->
    <script type="text/javascript">
        $(document).ready(function(){

            var obj=$("#wrap a");//获取a标签中的数据

            function rand(num){
//parseInt();将字符串转为整数
//Math.random()；生成随机数
                return parseInt(Math.random()*num+1);
            }

            function randomcolor(){
                var str=Math.ceil(Math.random()*16777215).toString(16);
                if(str.length<6){
                    str="0"+str;
                }
                return str;
            }

            for(len=obj.length,i=len;i--;){
                obj[i].style.left=rand(20)+"px";//标签左右间距
                obj[i].style.top=rand(20)+"px";//标签上下间距
                obj[i].className="color"+rand(5);
                obj[i].style.zIndex=rand(5);//设置元素的堆叠顺序
                obj[i].style.fontSize=rand(5)+15+"px";//随机字体大小这里是10-20
                obj[i].style.color="#"+randomcolor();//字体颜色
                obj[i].style.padding=rand(10)+"px";
            }
        });

    </script>
<script>
    window.onload = function() {
        var hash = window.location.hash;
        if(hash!=""){
            window.location.hash = window.location.hash;
            window.location = window.location;
            window.location = window.location;

        }

    }
</script>
</body>
</html>